<template>
	<view class="container">
		<!-- 摄像头界面 -->
		<camera class="camera" device-position="front" flash="off" @error="error"></camera>
		<view class="overlay">
			<view class="header">
				<view class="sub-header">
					<view class="title">
						<text>MARS:PSY-GPT</text>
					</view>
					<view class="features">
						<text>情绪微表情分析</text>
						<text>抑郁评估报告</text>
						<text>健康改善建议</text>
					</view>
				</view>
			</view>
			<view class="bottom-section">
				<view class="instructions-box">
					<view class="instructions">
						<view><text>保持脸部在画面中，按照文字提示回答问题</text></view>
						<view><text>个人信息平台会严格保密，请放心使用</text></view>
						<view><text>本小程序结果为多模态模型生成</text></view>
						<view><text>本请用户以专业医生诊断结果为准</text></view>
					</view>
				</view>
				<view class="button-container">
					<button type="default" class="button" @click="UploadvideoAndDetect()">上传视频</button>
				</view>
				<view class="button-container">
					<button type="default" class="button" @click="navigateToDetect()">开始检测</button>
				</view>
				<view class="footer">
					<view class="footer-item">
						<text @click="navigateToHistory()">历史记录</text>
					</view>
					<view class="footer-item" @click="showQRCode = true">
						<text>分享好友</text>
					</view>
				</view>
				<!-- 二维码弹窗 -->
				<view v-if="showQRCode" class="qrcode-modal">
					<!-- 遮罩层 -->
					<view class="modal-mask" @click="showQRCode = false"></view>

					<!-- 弹窗内容 -->
					<view class="modal-content">
						<image src="../../pic/share.jpg" mode="widthFix" class="qrcode-image" show-menu-by-longpress />
						<text class="tip-text">长按二维码保存或识别</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<movable-area class="movable-area" @click="navigateToChat()">
		<movable-view class="movable-view" direction="all">
			<img class="circle-img" src="../../pic/hover_sphere.jpg" alt="" />
		</movable-view>
	</movable-area>
</template>

<script>
	export default {
		data() {
			return {
				x: 100, // 悬浮球初始x坐标
				y: 100, // 悬浮球初始y坐标
				screenWidth: 0, // 屏幕宽度
				screenHeight: 0, // 屏幕高度
				isShrinking: false, // 是否正在收缩
				showQRCode: false
			};
		},
		methods: {
			// 检查并请求摄像头和麦克风权限
			checkCameraAndMicrophonePermissions() {
				wx.getSetting({
					success: (res) => {
						// 检查摄像头权限是否已授予
						if (!res.authSetting['scope.camera']) {
							wx.authorize({
								scope: 'scope.camera',
								success: () => {
									console.log('Camera permission granted.');
								},
								fail: () => {
									this.showPermissionModal('摄像头');
								}
							});
						}
						// 检查麦克风权限是否已授予
						if (!res.authSetting['scope.record']) {
							wx.authorize({
								scope: 'scope.record',
								success: () => {
									console.log('Microphone permission granted.');
								},
								fail: () => {
									this.showPermissionModal('麦克风');
								}
							});
						}
					}
				});
			},

			// 显示权限不足时的提示框
			showPermissionModal(permission) {
				wx.showModal({
					title: permission + '权限',
					content: '需要启用' + permission + '权限才能使用此功能，请在设置中开启。',
					showCancel: false,
					success: () => {
						wx.openSetting(); // 引导用户前往设置页面开启权限
					}
				});
			},

			// 跳转到上传视频页面
			UploadvideoAndDetect() {
				if (this.$globalData.userID) {
					this.getUserProfile();
				};
				uni.navigateTo({
					url: '/pages/upload/upload'
				});
			},

			// 跳转到检测页面，摄像头初始化在检测页面
			navigateToDetect() {
				if (this.$globalData.userID) {
					this.getUserProfile();
				};
				uni.navigateTo({
					url: '/pages/detect/detect'
				});
			},
			navigateToChat() {
				if (this.$globalData.userID) {
					this.getUserProfile();
				};
				uni.navigateTo({
					url: '/pages/chat/chat'
				});
			},
			// 跳转到历史记录页面
			navigateToHistory() {
				if (this.$globalData.userID) {
					this.getUserProfile();
				};
				uni.navigateTo({
					url: '/pages/history/history'
				});
			},
			// 错误处理
			error(e) {
				console.log(e.detail);
			},
			//获取用户名
			getUserProfile() {
				wx.getUserProfile({
					desc: '用于显示用户信息', // 提示用户授权的目的
					success: (res) => {
						console.log('用户信息:', res.userInfo);
						// 获取用户昵称
						this.username = res.userInfo.nickName;
					},
					fail: (err) => {
						console.error('获取用户信息失败:', err);
						wx.showModal({
							title: '提示',
							content: '需要获取用户信息以便提供服务，请授权',
							showCancel: false,
							success: () => {
								wx.openSetting();
							},
						});
					},
				});
			},
		},

		mounted() {
			// 页面加载时检查摄像头和麦克风权限
			this.checkCameraAndMicrophonePermissions();
		},
	}
</script>

<style scoped>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.camera {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.overlay {
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		z-index: 2;
		background: rgba(0, 0, 0, 0.3);
	}

	.header {
		text-align: center;
		color: white;
		padding: 20rpx 0;
	}

	.sub-header {
		margin-top: 20rpx;
	}

	.title {
		color: white;
		font-size: 30px;
	}

	.features {
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		color: white;
		font-size: 14px;
	}

	.features text {
		margin: 0 8px;
	}

	.bottom-section {
		width: 100%;
		position: absolute;
		bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.instructions-box {
		width: 90%;
		padding-left: 0rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background: rgba(255, 255, 255, 0.1);
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.instructions {
		text-align: center;
		color: white;
	}

	.instructions view {
		margin-bottom: 5rpx;
	}

	.button-container {
		width: 90%;
		display: flex;
		justify-content: center;
		margin-bottom: 10rpx;
	}

	.button {
		color: white !important;
		width: 100%;
		background-color: #02b6c4 !important;
		border-radius: 40rpx;
	}

	.footer {
		display: flex;
		justify-content: space-around;
		width: 80%;
		color: white;
	}

	.footer-item {
		flex: 1;
		text-align: center;
		padding: 10rpx;
		color: white;
	}

	.movable-area {
		pointer-events: none;
		z-index: 100;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.movable-view {
		pointer-events: auto;
		height: 50px;
		width: 50px;
	}

	.circle-img {
		border-radius: 50%;
		/* 使图片变成圆形 */
		object-fit: cover;
		/* 确保图片适应容器且不变形 */
		height: 50px;
		width: 50px;
	}

	/* 弹窗样式 */
	.qrcode-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.modal-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: relative;
		width: 80%;
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx;
		text-align: center;
		z-index: 1000;
	}

	.qrcode-image {
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
	}

	.tip-text {
		display: block;
		margin-top: 30rpx;
		color: #666;
		font-size: 26rpx;
	}
</style>